<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>密室逃脱</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@alphardex/aqua.css@1.5.5/dist/aqua.min.css">
    <style>
        body {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: black;
            overflow: hidden;
        }

        :root {
            --secondary-color-darkest: #333;
            --yellow-color-1: #e67e22;
            --stage-width: 18rem;
            --scene-id: 0;
            --input-padding: 1px;
            --input-bg: transparent;
        }

        .form-control {

            border: none;
        }

        .camera {

            position: relative;
            width: var(--stage-width);
            height: var(--stage-width);
            overflow: hidden;
        }

        .stage {
            transform: translateY(calc(var(--stage-width) * var(--scene-id) * -1));
        }

        .scene {
            position: relative;
            width: var(--stage-width);
            height: var(--stage-width);
            background: linear-gradient(to bottom, #dad3c5 0 75%, #2b1814 0 0);
        }

        .hints {
            position: absolute;
            bottom: 0.2rem;
            width: 100%;
            color: white;
            font-size: 0.75rem;
            text-align: center;
        }

        input[type=checkbox],
        input[type=radio] {
            display: none;
        }

        label {
            position: absolute;
            display: inline-block;
            color: white;
            font-size: 12px;
            cursor: pointer;
            transition: 0.1s;
        }

        label:hover {
            filter: brightness(1.5);
        }

        .navs {
            position: absolute;
            top: 50%;
            width: 100%;
            display: flex;
            justify-content: space-between;
            transform: translateY(-50%);
            pointer-events: none;
        }

        .navs label {
            position: static;
            width: 2rem;
            height: 2rem;
            background: var(--yellow-color-1);
            pointer-events: auto;
        }

        .navs label.nav-left {
            -webkit-clip-path: polygon(50% 50%, 100% 100%, 100% 0);
            clip-path: polygon(50% 50%, 100% 100%, 100% 0);
        }

        .navs label.nav-right {
            -webkit-clip-path: polygon(0 0, 0 100%, 50% 50%);
            clip-path: polygon(0 0, 0 100%, 50% 50%);
        }

        .triggers {
            display: flex;
            flex-direction: column;
        }

        .hint {
            display: none;
        }

        .nav-trigger-1:checked~.stage {
            --scene-id: 0;
        }

        .nav-trigger-2:checked~.stage {
            --scene-id: 1;
        }

        .nav-trigger-3:checked~.stage {
            --scene-id: 2;
        }

        .nav-trigger-4:checked~.stage {
            --scene-id: 3;
        }

        .hammer {
            display: none;
            transition: 0.3s;
        }

        .globe-trigger:checked~.scene .globe {
            pointer-events: none;
        }

        .globe-trigger:checked~.scene .hammer {
            display: inline-block;
        }

        .globe-trigger:checked~.scene .hints .hint {
            display: none !important;
        }

        .globe-trigger:checked~.scene .hints .globe-trigger-active {
            display: inline-block !important;
        }

        .hammer-trigger:checked~.scene .hammer {
            transform: scale(0);
            opacity: 0;
        }

        .hammer-trigger:checked~.scene .hints .hint {
            display: none !important;
        }

        .hammer-trigger:checked~.scene .hints .hammer-trigger-active {
            display: inline-block !important;
        }

        .drawer {
            pointer-events: none;
        }

        .slab {
            display: none;
            transition: 0.3s;
        }

        .breach {
            display: none;
        }

        .hammer-trigger:checked~.scene .drawer {
            pointer-events: auto;
        }

        .drawer-trigger:checked~.scene .drawer {
            pointer-events: none !important;
        }

        .drawer-trigger:checked~.scene .slab {
            display: inline-block;
        }

        .drawer-trigger:checked~.scene .breach {
            display: inline-block;
        }

        .drawer-trigger:checked~.scene .hints .hint {
            display: none !important;
        }

        .drawer-trigger:checked~.scene .hints .drawer-trigger-active {
            display: inline-block !important;
        }

        .slab-trigger:checked~.scene .slab {
            transform: scale(0);
            opacity: 0;
        }

        .slab-trigger:checked~.scene .hints .hint {
            display: none !important;
        }

        .slab-trigger:checked~.scene .hints .slab-trigger-active {
            display: inline-block !important;
        }

        .slab-groove {
            pointer-events: none;
        }

        .slab-installed {
            display: none;
        }

        .picture-trigger:checked~.scene .picture {
            transform: translateX(2rem);
        }

        .usb {
            display: none;
            transition: 0.3s;
        }

        .slab-trigger:checked~.scene .slab-groove {
            pointer-events: auto;
        }

        .slab-groove-trigger:checked~.scene .slab-groove {
            display: none;
            pointer-events: none !important;
        }

        .slab-groove-trigger:checked~.scene .slab-installed {
            display: inline-block;
        }

        .slab-groove-trigger:checked~.scene .usb {
            display: inline-block;
        }

        .slab-groove-trigger:checked~.scene .hints .hint {
            display: none !important;
        }

        .slab-groove-trigger:checked~.scene .hints .slab-groove-trigger-active {
            display: inline-block !important;
        }

        .usb-trigger:checked~.scene .usb {
            transform: scale(0);
            opacity: 0;
        }

        .usb-trigger:checked~.scene .hints .hint {
            display: none !important;
        }

        .usb-trigger:checked~.scene .hints .usb-trigger-active {
            display: inline-block !important;
        }

        .pc {
            pointer-events: none;
        }

        .pc-on {
            display: none;
        }

        .password-input {
            display: none;
        }

        .door {
            pointer-events: none;
        }

        .door-open {
            display: none;
        }

        .key {
            display: none;
            transition: 0.3s;
        }

        .usb-trigger:checked~.scene .pc {
            pointer-events: auto;
        }

        .pc-trigger:checked~.scene .pc {
            pointer-events: none !important;
        }

        .pc-trigger:checked~.scene .pc-on {
            display: inline-block;
        }

        .pc-trigger:checked~.scene .password-input {
            display: inline-block;
        }

        .pc-trigger:checked~.scene .hints .hint {
            display: none !important;
        }

        .pc-trigger:checked~.scene .hints .pc-trigger-active {
            display: block !important;
        }

        .password-input:valid {
            pointer-events: none;
        }

        .password-input:valid~.key {
            display: inline-block;
        }

        .key-trigger:checked~.scene .key {
            transform: scale(0);
            opacity: 0;
        }

        .key-trigger:checked~.scene .door {
            pointer-events: auto;
        }

        .key-trigger:checked~.scene .hints .hint {
            display: none !important;
        }

        .key-trigger:checked~.scene .hints .key-trigger-active {
            display: block !important;
        }

        .door-trigger:checked~.scene .door {
            display: none;
            pointer-events: none !important;
        }

        .door-trigger:checked~.scene .door-open {
            display: inline-block;
        }

        .door-trigger:checked~.scene .hints .hint {
            display: none !important;
        }

        .door-trigger:checked~.scene .hints .door-trigger-active {
            display: block !important;
        }

        .door-open-trigger:checked~.scene .door-open {
            pointer-events: none;
        }

        .door-open-trigger:checked~.scene .hints .hint {
            display: none !important;
        }

        .door-open-trigger:checked~.scene .hints .door-open-trigger-active {
            display: block !important;
        }

        .door-open-trigger:checked~.scene .navs {
            display: none;
        }

        .door {
            top: 27.3%;
        }

        .globe {
            top: 34.5%;
            right: 26.7%;
        }

        .drawer {
            top: 48.5%;
            right: 24%;
        }

        .picture {
            top: 15%;
            left: 28%;
            transition: transform 0.3s, filter 0.1s;
        }

        .password {
            position: absolute;
            top: 7%;
            left: 36%;
            width: 5rem;
            line-height: 2;
            font-size: 2rem;
            white-space: nowrap;
            text-align: center;
            font-weight: bold;
        }

        .hammer {
            top: 60%;
            left: 45%;
        }

        .breach {
            position: absolute;
            top: 56%;
            right: 24%;
        }

        .slab {
            top: 77%;
            right: 28%;
        }

        .slab-groove,
        .slab-installed {
            position: absolute;
            top: 20%;
            left: 29%;
        }

        .usb {
            top: 74%;
            left: 28%;
        }

        .desk {
            position: absolute;
            top: 61%;
        }

        .pc,
        .pc-on {
            top: 45%;
        }

        .key {
            top: 77%;
        }

        .door-open {
            position: absolute;
            top: 27.5%;
        }

        .password-input {
            position: absolute;
            top: 47.5%;
            left: 42.5%;
            width: 2.5rem;
            font-size: 12px;
        }
    </style>

</head>

<body>
    <pre style="color: #fff;">
         攻略
        1. 左转，转动地球仪
        2. 右转，发现一根锤子，点击捡起，记住墙上的数字
        3. 左转，点击柜子，用锤子砸开它，获得一个圆盘
        4. 点击墙上的壁画，壁画移开，看到一圆盘印，嵌入圆盘，获得一个usb
        5. 右转2次，将usb插入电脑，电脑开启，输入墙上的密码，获得钥匙
        6. 右转，用钥匙打开大门，游戏结束
    </pre>
    <div class="camera">
        <!-- 导航 -->
        <input type="radio" id="nav-1" name="nav" class="nav-trigger-1" />
        <input type="radio" id="nav-2" name="nav" class="nav-trigger-2" />
        <input type="radio" id="nav-3" name="nav" class="nav-trigger-3" />
        <input type="radio" id="nav-4" name="nav" class="nav-trigger-4" />
        <form class="stage">
            <!-- 开关 -->
            <input type="radio" id="globe" class="globe-trigger" />
            <input type="radio" id="hammer" class="hammer-trigger" />
            <input type="radio" id="drawer" class="drawer-trigger" />
            <input type="radio" id="slab" class="slab-trigger" />
            <input type="checkbox" id="picture" class="picture-trigger" />
            <input type="radio" id="slab-groove" class="slab-groove-trigger" />
            <input type="radio" id="usb" class="usb-trigger" />
            <input type="radio" id="pc" class="pc-trigger" />
            <input type="radio" id="key" class="key-trigger" />
            <input type="radio" id="door" class="door-trigger" />
            <input type="radio" id="door-open" class="door-open-trigger" />
            <!-- 场景 -->
            <div class="scene scene-1">
                <label for="door" class="door h-center" data-tooltip="door" data-placement="top">
                    <img src="https://i.loli.net/2020/10/25/ZnB2IaV5Nq76MfR.png" alt class="w-24" />
                </label>
                <label for="door-open" class="door-open h-center" data-tooltip="door" data-placement="top">
                    <img src="https://i.loli.net/2020/10/25/9JgmT4Me6tHpY5c.png" alt class="w-24" />
                </label>
                <nav class="navs">
                    <label for="nav-4" class="nav-left"></label>
                    <label for="nav-2" class="nav-right"></label>
                </nav>
                <div class="hints">
                    <div class="hint door-trigger-active">You unlocked the door with the key.</div>
                    <div class="hint door-open-trigger-active">Congratulations! You cleared the game!</div>
                </div>
            </div>
            <div class="scene scene-2">
                <label for="drawer" class="drawer" data-tooltip="drawer" data-placement="left">
                    <img src="https://i.loli.net/2020/10/25/kiEUTazlO3GeRA2.png" alt class="w-12" />
                </label>
                <label for="globe" class="globe" data-tooltip="globe" data-placement="top">
                    <img src="https://i.loli.net/2020/10/25/YBnOQ2jVtSTmFkE.png" alt class="w-8" />
                </label>
                <img src="https://i.loli.net/2020/10/25/TfAyWaEN1k28lOv.png" alt class="breach w-12" title="breach" />
                <label for="slab" class="slab" data-tooltip="slab" data-placement="left">
                    <img src="https://i.loli.net/2020/10/25/J5GrKZRVpf4aU9b.png" alt class="w-6" />
                </label>
                <label for="slab-groove" class="slab-groove" data-tooltip="slab-groove" data-placement="bottom">
                    <img src="https://i.loli.net/2020/10/25/tk3IoO4vVqhS529.png" alt class="w-6" />
                </label>
                <img src="https://i.loli.net/2020/10/25/J5GrKZRVpf4aU9b.png" alt class="slab-installed w-6"
                    title="slab-installed" />
                <label for="picture" class="picture" data-tooltip="picture" data-placement="bottom">
                    <img src="https://i.loli.net/2020/10/25/jeZJHvi2dlL56uG.png" alt class="w-8" />
                </label>
                <label for="usb" class="usb" data-tooltip="usb" data-placement="top">
                    <img src="https://i.loli.net/2020/10/25/DjldpVuToA5Fh9Y.png" alt class="w-4" />
                </label>
                <nav class="navs">
                    <label for="nav-1" class="nav-left"></label>
                    <label for="nav-3" class="nav-right"></label>
                </nav>
                <div class="hints">
                    <!-- <div class="hint globe-trigger-active">You rotated the globe, and something droped down.</div> -->
                    <div class="hint globe-trigger-active">地球仪被你转动了， 听，似乎有什么东西咣当掉在了地上</div>
                    <div class="hint drawer-trigger-active">You cracked the drawer with the hammer, and found a slab.
                    </div>
                    <div class="hint slab-trigger-active">You picked a slab.</div>
                    <div class="hint slab-groove-trigger-active">You put the slab into the groove, and found a usb.
                    </div>
                    <div class="hint usb-trigger-active">You picked a usb.</div>
                </div>
            </div>
            <div class="scene scene-3">
                <div class="password">
                    I I IV <br />
                    V I IV
                </div>
                <label for="hammer" class="hammer" data-tooltip="hammer" data-placement="top">
                    <img src="https://i.loli.net/2020/10/25/KhVp4EaMoYrjlIC.png" alt class="w-6" />
                </label>
                <nav class="navs">
                    <label for="nav-2" class="nav-left"></label>
                    <label for="nav-4" class="nav-right"></label>
                </nav>
                <div class="hints">
                    <div class="hint hammer-trigger-active">You picked a hammer.</div>
                </div>
            </div>
            <div class="scene scene-4">
                <label for="pc" class="pc h-center" data-tooltip="pc" data-placement="top">
                    <img src="https://i.loli.net/2020/10/26/VuNWLqTlZIfvUsF.png" alt class="w-16" />
                </label>
                <label for="pc-on" class="pc-on h-center" data-tooltip="pc-on" data-placement="top">
                    <img src="https://i.loli.net/2020/10/25/y8OJ7QtlnFZAvrV.png" alt class="w-16" />
                </label>
                <input type="password" id="password" pattern="114514" class="password-input form-control" required />
                <img src="https://i.loli.net/2020/10/25/rjmZ1gyTRdUzAk7.png" alt class="desk w-24 h-center" />
                <label for="key" class="key h-center" data-tooltip="key" data-placement="top">
                    <img src="https://i.loli.net/2020/10/25/wfVxH9bDORkjr5q.png" alt class="w-6" />
                </label>
                <nav class="navs">
                    <label for="nav-3" class="nav-left"></label>
                    <label for="nav-1" class="nav-right"></label>
                </nav>
                <div class="hints">
                    <div class="hint pc-trigger-active">The PC is turned on, which looks like you need to enter the
                        password.</div>
                    <div class="hint key-trigger-active">You picked a key.</div>
                </div>
            </div>
        </form>
    </div>



</body>

</html>